<template>
  <div class="main_content">
    <father-title></father-title>
    <div class="contentBox">
      <header-tabs>
        <template slot="tabs">
          <div>
            <div class="select_tab">字典管理</div>
          </div>
        </template>
      </header-tabs>

      <div class="middleBox">
        <search-box @clickSearch="search">
          <template slot="left">
            <Input v-model="searchParams.name" placeholder="请输入字典名"></Input>
          </template>

          <template slot="right">
            <Button v-if="$store.state.perms.includes('sys:dict:save')" type="primary" @click="addData">新增</Button>
          </template>
        </search-box>

        <v-table :loading="pageConfig.loading" border :columns="columns" :data="list">
          <template slot-scope="{ row }" slot="operation">
            <Button v-if="$store.state.perms.includes('sys:dict:update')" type="primary" size="small" @click="editData(row)">修改</Button>
            <Button v-if="$store.state.perms.includes('sys:dict:delete')" class="button_spacing" type="error" size="small" @click="deleteData(row)">删除</Button>
          </template>
        </v-table>

        <v-page :pageConfig="pageConfig" @refresh="getList"></v-page>
      </div>
    </div>

    <AddOrEditModal
        v-model="modalCTL.show"
        :title="modalCTL.title"
        :loading="modalCTL.loading"
        @on-ok="addOrEditData">
      <Form
          ref="form"
          :model="formValidate"
          :rules="ruleValidate"
          label-position="top"
          slot="content">
        <FormItem label="字典名称" prop="name">
          <Input v-model="formValidate.name" placeholder="" />
        </FormItem>
        <FormItem label="字典类型" prop="type">
          <Input v-model="formValidate.type" placeholder="" />
        </FormItem>
        <FormItem label="字典码" prop="code">
          <Input v-model="formValidate.code" placeholder="" />
        </FormItem>
        <FormItem label="字典值" prop="value">
          <Input v-model="formValidate.value" placeholder="" />
        </FormItem>
        <FormItem label="备注" prop="remark">
          <Input v-model="formValidate.remark" placeholder="" />
        </FormItem>
      </Form>
    </AddOrEditModal>
  </div>
</template>

<script>
import {columns, pageConfig, formValidate, ruleValidate} from "./pageConfig";

export default {
  name: 'DictManage',

  data() {
    return {
      columns,
      pageConfig,
      formValidate: {...formValidate},
      ruleValidate,
      list: [],
      searchParams: {
        name: null
      },
      modalCTL: {
        show: false,
        loading: true,
        title: ""
      },
    };
  },

  mounted() {
    this.getList(this.pageConfig);
  },

  methods: {
    // 删除数据
    deleteData(data){
      this.$Modal.confirm({
        title: '删除',
        content: `是否删除${data.name}？`,
        loading: true,
        onOk: () => {
          this.$api.post('sp/sys/dict/delete', [data.id]).then((res)=>{
            if(res.data.code === 0){
              this.getList(this.pageConfig);
              this.$Message.success('删除成功');
            }
          }).finally(()=>this.$Modal.remove());
        }
      });
    },

    // 新增数据
    addData(){
      this.formValidate = {...formValidate};
      this.modalCTL.title = "新增系统字典";
      this.modalCTL.show = true;
    },

    // 修改数据
    editData(data){
      let form = {...formValidate};
      Object.keys(form).forEach((key) => form[key] = data[key]);
      this.formValidate = form;
      this.modalCTL.title = "修改系统字典";
      this.modalCTL.show = true;
    },

    // 新增或修改
    addOrEditData(){
      // 校验数据
      this.$refs.form.validate(state => {
        if (!state){
          this.modalCTL.loading = false;
          this.$nextTick(() => {
            this.modalCTL.loading = true;
          });
          return this.$Message.warning("请填写对应的值");
        }
        // 判断新增或修改
        if(this.formValidate.id){
          this.$api.post('sp/sys/dict/update', this.formValidate).then((res)=>{
            if(res.data.code === 0){
              this.getList(this.pageConfig);
              this.$Message.success("修改成功");
            }
          }).finally(()=> this.modalCTL.show = false);
        }else{
          this.$api.post('sp/sys/dict/save', this.formValidate).then((res)=>{
            if(res.data.code === 0){
              this.getList(this.pageConfig);
              this.$Message.success("新增成功");
            }
          }).finally(()=> this.modalCTL.show = false);
        }

      });
    },

    // 获取列表
    getList(page){
      this.pageConfig.loading = true;
      this.$api.get("sp/sys/dict/list", {
        params: {
          page: page.pageNow,
          limit: page.pageSize,
          ...this.searchParams,
        }
      }).then((res)=>{
        if(res.data.code === 0){
          this.list = res.data.page.list;
          this.pageConfig.total = res.data.page.totalCount;
        }
      }).finally(()=>{
        this.pageConfig.loading = false;
      });
    },

    // 搜索
    search(){
      this.pageConfig.pageNow = 1;
      this.getList(this.pageConfig);
    },
  }
};
</script>

<style scoped lang="less">
</style>